<template>
  <div class="aui-card--fill scroll-box card-box"
       style="display:flex">
    <div class="pane-shell"
         style="margin-right:20px">
      <div style="font-size: 18px; margin-bottom: 20px; font-weight: bold;">定时任务设置</div>
      <el-table v-loading="dataListLoading"
                :data="dataList"
                @selection-change="dataListSelectionChangeHandle"
                @sort-change="dataListSortChangeHandle"
                style="width: 100%;">
        <el-table-column type="index"
                         label="序号"
                         header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="quartzName"
                         label="任务名称"
                         header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="status"
                         label="状态"
                         header-align="center"
                         align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status"
                       :active-value="'1'"
                       :inactive-value="'0'"
                       active-color="#13ce66"
                       inactive-color="#ff4949"
                       @change="setStatus($event,scope.row.id)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="intervalTime"
                         label="触发频率（分钟）"
                         header-align="center"
                         align="center">
          <template slot-scope="scope">
                      <!-- @input="timeChange(scope.row.intervalTime,scope.$index)" -->
            <el-input oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                      v-model.trim="scope.row.intervalTime"
                      placeholder="">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column :label="$t('handle')"
                         fixed="right"
                         header-align="center"
                         align="center">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       @click="updataTime(scope.row.id,scope.row.intervalTime)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-button type="primary"
                 style="margin-top: 30px;"
                 @click="dataFormSubmitHandle()">保存</el-button> -->
    </div>
    <div class="pane-shell">
      <!-- <el-table v-loading="dataListLoading"
                :data="dataList"
                @selection-change="dataListSelectionChangeHandle"
                @sort-change="dataListSortChangeHandle"
                style="width: 100%;">
        <el-table-column type="index"
                         label="序号"
                         header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="roleName"
                         label="任务名称"
                         header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="remake"
                         label="触发频率（分钟）"
                         header-align="center"
                         align="center"></el-table-column>
      </el-table> -->
    </div>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
// import debounce from 'lodash/debounce'
// import roleUserAddOrUpdate from './role-user-add-or-update'
export default {
  mixins: [mixinViewModule],
  name: '',
  mounted () {
    this.getDataList1()
  },
  data () {
    return {
      mixinViewModuleOptions: {
        // getDataListURL: '/sys/role/queryPage', // 数据列表接口，API地址
        updateStatusURL: '/tb/quartzJob/updateStatus', // 修改状态
        // getRuleListURL: '/system/sysMenu/getMenuListForRole', // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addOrUpdateURL: '', // 添加或修改接口，API地址
        getDataInfoURL: '', // 数据详情，API地址
        deleteURL: '/sys/role/delRole', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '' // 导出接口，API地址
      },
      ruleLoading: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dataForm: {
        // taskType: [],
        // time: []
      },
      dataItem: [],
      ruleData: []
    }
  },
  watch: {
  },
  components: {
  },
  computed: {
  },
  methods: {
    getDataList1 () {
      this.$http.get('/tb/quartzJob/allTask').then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataList = res.data
        // res.data.map((item) => {
        //   console.log(item)
        //   // this.dataForm.taskType.push(item.taskType)
        //   // this.dataForm.time.push(item.time)
        //   this.dataItem.push({
        //     taskType: item.taskType,
        //     time: item.time
        //   })
        // })
      })
    },
    // 修改状态
    setStatus (data, id) {
      this.$http.post('/tb/quartzJob/updateStatus', {
        id,
        status: data
      }).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500
        })
      })
    },
    // timeChange (val, idx) {
    //   this.dataItem[idx].intervalTime = val
    // },
    updataTime (id, intervalTime) {
      console.log(id, intervalTime)
      this.$http.post('/tb/quartzJob/updateIntervalTime', {
        id,
        intervalTime
      }).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500
        })
        this.getDataList1()
      })
    }
    // dataFormSubmitHandle: debounce(function () {
    //   this.$http.post('/tb/timedTask/modifyTime', this.dataItem).then(({ data: res }) => {
    //     if (res.code !== 0) {
    //       return this.$message.error(res.msg)
    //     }
    //     this.$message({
    //       message: this.$t('prompt.success'),
    //       type: 'success',
    //       duration: 500
    //     })
    //   })
    // }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>

<style lang="scss" scoped>
</style>
